<template>
  <div class="qopSon waterLine" style="padding-top:15px;">
	<div class="progress_box clear_float">
		<radial-progress-bar  @click="pushBar(index)"	v-for="(item , index) of progress" v-if="index<4" ref="componentref" :key="index"
		 	:diameter="progress_data.diameter"
			:strokeWidth="progress_data.strokeWidth"
			:startColor="progress2[index].start"
			:stopColor="progress2[index].end"
			:animateSpeed="500"
			:totalPomodoro=1
			:innerStrokeColor="progressBac[index].start"
			:completed-steps='item.count'
			:total-steps="item.allCount"

			>

		<span>{{item.count}}/{{item.allCount}}</span>
		<div>近{{item.key}}小时</div>
		</radial-progress-bar>
	</div>
	<div class="push_bar"></div>
	<div class="word_box">
		<div class="word_box_title">近{{progress[index].key}}小时降水</div>
		<div class="word_box_cons">{{progress[index].word}}</div>
	</div>
	<div id="water_echart" class="echart_box echart_box_all">

	</div>
  </div>
</template>

<script>
import topTitle from './top';
import RadialProgressBar from 'vue-radial-progress'
import echarts from 'echarts'
export default {
    props:["msg"],
	components: {
		topTitle,
		RadialProgressBar,
    },
	data() {
		return {
			charts:null,
			title:{
				name: "降水信息",
				time: "2018-10-22 16:13",
			},
			index:1,
			progress:[
				{count:0,word:"",start:'##00E4FF',end:'#00C2C9'},{count:0,word:"",start:"#FEFEAC",end:"#A3B28B"},
				{count:0,word:"",start:"#FDA572",end:"#855D51"},{count:0,word:"",start:"#FD6D66",end:"#96474E"},
				{count:0,word:"",start:"#BD0800",end:"#5A0F1A"},
			],
			progressBac:[
				{count:0,word:"",start:'#00EAFF'},{count:0,word:"",start:'#FFFB20'},
				{count:0,word:"",start:'#FF8B4C'},{count:0,word:"",start:'#FF453C'},
				{count:0,word:"",start:'#BD0800'},
			],
			progress2:[
				{count:0,word:"",start:'#00EAFF',end:'#EEF9FF'},{count:0,word:"",start:"#FFFB20",end:"#EEF9FF"},
				{count:0,word:"",start:"#FF8B4C",end:"#EEF9FF"},{count:0,word:"",start:"#FF453C",end:"#EEF9FF"},
				{count:0,word:"",start:"#BD0800",end:"#5A0F1A"},
			],
			progress_data:{
				diameter:200,
				strokeWidth:10,
  			totalSteps: 80
			},
			allCount:0,

		}
	},
	methods:{
        closeThis(){
            this.$emit('closep',this.msg.name)
        },
        pushBar(index){


		},
		refreshEchartHeight(){
			var height=$(".qop")[0].clientHeight-$(".indexComTop")[0].clientHeight-$(".waterLine").find(".progress_box")[0].clientHeight-$(".waterLine").find(".word_box")[0].clientHeight-23;
			$(".echart_box").css("height",height);
			if(this.charts){
				this.charts.resize();
			}
		},
		refreshAll(){
			var width=$(".progress_box").width()-20;
			this.progress_data.diameter=width*0.25;
			setTimeout(()=>{
				this.refreshEchartHeight();

			},1000)
		},
		doEchart(index){
			this.refreshEchartHeight();
			var _data=this.progress[index];
			var x=[];
			var y=[];

			for(var i=0;i<10;i++){
				x.push(_data.stationAll[i].StationName);
				y.push(_data.stationAll[i].Precipitation);
			}
//      console.log(x,y)
			this.charts = echarts.init(document.getElementById("water_echart"));
			this.charts.setOption({
				color: ['#3398DB'],
				tooltip : {
					trigger: 'axis',
					axisPointer : {            // 坐标轴指示器，坐标轴触发有效
						type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					}
				},
				grid: {
					top:"20%",
					left: '3%',
					right: '4%',
					bottom: '3%',
					containLabel: true
				},
				xAxis : [
					{
						type : 'category',
						data : x,
						axisTick: {
							alignWithLabel: true
						},
						axisLabel: {
							interval:0,
							rotate:40
						},
						axisLine:{
							lineStyle: {
								color: '#fff'
							}
						}
					}
				],
				yAxis : [
					{
						type : 'value',
						splitLine:{show: false},
						axisLine:{
							lineStyle: {
								color: '#fff'
							},
						}
					},
				],
				series : [
					{
						name:'降水量',
						type:'bar',
						barWidth: '60%',
						data:y,
						itemStyle: {
							normal: {
								// barBorderRadius: 5,
								color: new echarts.graphic.LinearGradient(
									0, 0, 0, 1,
									[
										{offset: 0, color: '#00E1F4'},
										{offset: 1, color: 'rgba(0,222,240,0.1)'}
									]
								)
							}
						},
					}
				]
			});
		}
    },
	mounted(){
		var width=$(".progress_box").width()-20;
		this.progress_data.diameter=width*0.25;
		// setTimeout(()=>{
		// 		this.doEchart();
		// 	},1000)
		this.$emit('refreshTop',this.title);
		this.$ajax({method: 'get',	url: "http://172.21.129.156:8081/web/rain/RainInfo?code=330600000000&type=1",}).then((res)=>{
		  console.log(res)
			var _data=res.data.DS;
			this.title.time=_data.time;

			this.allCount=_data.count;
			// _data.rain[1].count=23
			_data.rain[1].key=1;_data.rain[1].allCount=_data.rain[1].stationAll.length;
			// _data.rain[3].count=12
			_data.rain[3].key=3;_data.rain[3].allCount=_data.rain[3].stationAll.length;
			// _data.rain[6].count=33;
			_data.rain[6].key=6;_data.rain[6].allCount=_data.rain[6].stationAll.length;
			// _data.rain[12].count=45;
			_data.rain[12].key=12;_data.rain[12].allCount=_data.rain[12].stationAll.length;
			// _data.rain[24].count=32;
			_data.rain[24].key=24;_data.rain[24].allCount=_data.rain[24].stationAll.length;
			this.progress[0]=_data.rain[1];
			this.progress[1]=_data.rain[3];
			this.progress[2]=_data.rain[6];
			this.progress[3]=_data.rain[12];
			this.progress[4]=_data.rain[24];
			console.log(_data)
			setTimeout(()=>{
				this.doEchart(0);
			},1000)
			this.index=0;
			$(".radial-progress-inner").each((index)=>{
				var that=$(".radial-progress-inner")[index];
				$(that).click(()=>{
					this.index=index;
					var width=$(".progress_box").width()-20;
					$(".push_bar").css("margin-left",(index*0.26+0.02)*width);
					setTimeout(()=>{
						this.doEchart(index);
					},1000)
				})
			});
		})
		.catch(function(err){
			//console.log(err)
		})
	}
}
</script>

<style lang="less">
.echart_box_all{
	margin-top: -10px;
}
	.progress_box{
		width: 100%;
		display: flex;
		justify-content:space-around;
		.radial-progress-container{
	 		// width: 25%;
			margin:0 0%;
			font-size: 10px;
			cursor: pointer;
			.radial-progress-inner{
				font-size: 10px;
				div{
					font-size: 10px;
				}
			}
		}
		&>div{
			float: left;
		}
	}
	.push_bar{
		width: 22%;
		height: 3px;
		border-radius: 40%;
		background: rgba(249, 175, 39, 0.6);
		margin-top: 5px;
		box-shadow: 0px 0px 3px #f9c64a;
		margin-left: 2%;
		transition: all 0.3s;
	}
	.word_box{
		padding:11px 10px 0;
		.word_box_title{
			font-size: 14px;
			color: #3CEAF3;
		}
		.word_box_cons{
			color: #333;
			margin-top: 10px;
			text-indent: 2em;
			font-size: 12px;
			line-height: 2em;
			display: none;
		}
	}
	.qop{
		// padding:0  10px;
		&>.qopSon{
			padding:0  10px;
		}
	}
	.echart_box_all{
		height: 40%;
		width: 100%;
		padding: 0px 0px;
	}
</style>
